<template>
  <div>
    <template>
      <el-table :data="list" style="width: 100%">
        <el-table-column
          prop="number"
          align="center"
          label="试题编号"
          width="280"
        >
        </el-table-column>
        <el-table-column prop="subject" align="center" label="学科" width="130">
        </el-table-column>
        <el-table-column prop="catalog" align="center" label="目录" width="130">
        </el-table-column>
        <el-table-column
          prop="questionType"
          align="center"
          label="题型"
          width="130"
        >
          <template slot-scope="{ row }">
            {{
              row.questionType == 1
                ? "单选"
                : row.questionType == 2
                ? "多选"
                : "简答"
            }}
          </template>
        </el-table-column>

        <el-table-column
          prop="question"
          align="center"
          label="题干"
          width="180"
        >
          <template slot-scope="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          align="center"
          label="审核状态"
          width="140"
        >
          <template slot-scope="{ row }">
            <el-tag
              :type="
                row.chkState == 0
                  ? 'warning'
                  : row.chkState == 1
                  ? 'success'
                  : 'danger'
              "
            >
              {{
                row.chkState == 0
                  ? "待审核"
                  : row.chkState == 1
                  ? "已通过"
                  : "已拒绝"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="publishState"
          align="center"
          label="发布状态"
          width="130"
        >
          <template slot-scope="{ row }">
            {{ row.publishState == 1 ? "已发布" : "未发布" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          align="center"
          label="录入时间"
          width="280"
        >
          <template slot-scope="{ row }">
            <span
              >{{ $moment(row.addDate).format("YYYY-MM-DD hh:mm:ss") }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="difficulty" align="center" label="难度">
          <template slot-scope="{ row }">
            {{
              row.difficulty == 1
                ? "简单"
                : row.difficulty == 2
                ? "一般"
                : "困难"
            }}
          </template>
        </el-table-column>

        <el-table-column
          prop="creator"
          align="center"
          label="录入人"
          width="180"
        >
        </el-table-column>

        <el-table-column fixed="right" align="center" label="操作" width="280">
          <template slot-scope="{ row }">
            <el-button size="small" type="text" circle @click="yulan(row)"
              >预览</el-button
            >
            <el-button
              size="small"
              :disabled="row.chkState === 0 ? false : true"
              type="text"
              circle
              @click="EditExamine(row)"
              >审核</el-button
            >
            <el-button
              size="small"
              :disabled="row.publishState == 1 ? true : false"
              type="text"
              circle
              @click="$router.push(`/tiku_shiti?id=${row.id}`)"
              >修改</el-button
            >
            <el-button size="small" type="text" @click="shangjia(row)" circle>{{
              row.publishState == 0 ? "上架" : "下架"
            }}</el-button>
            <el-button
              size="small"
              :disabled="row.publishState == 1 ? true : false"
              type="text"
              circle
              @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 审批 -->
    <Examine ref="examine"></Examine>
    <!-- 预览 -->
    <QuestionsInfo ref="QuestionsInfo"></QuestionsInfo>
  </div>
</template>

<script>
import QuestionsInfo from "./QuestionsInfo.vue";
import {
  EditQuerstionsListApi,
  delQuestionsApi,
  getQuestionsInfoApi,
} from "@/api/Questions";
import Examine from "./examine.vue";
export default {
  name: "QuestionItem",
  data() {
    return {
      list: [],
    };
  },
  components: {
    Examine,
    QuestionsInfo,
  },
  created() {},
  methods: {
    //预览
    async yulan(val) {
      // console.log(val);
      if (
        val.id == "" ||
        val.catalogID == "" ||
        val.catalog == null ||
        val.enterprise == ""
      ) {
        return this.$message.warning("当前题目不可预览");
      } else {
        // console.log(val);
        //查询单条数据
        const res = await getQuestionsInfoApi(val.id);
        // console.log(res);
        //赋值给弹框根数组
        this.$refs.QuestionsInfo.list = res;
        this.$refs.QuestionsInfo.options = res.options;
        // 拿到单挑数据中已经勾选的数据（已勾选的状态是1）
        let abc = res.options.filter((item) => item.isRight == 1);
        // console.log(abc);
        //根据类型判断如果是简答题则给show滞空，否则把选中的id传过去
        if (res.questionType == 3) {
          this.$refs.QuestionsInfo.show = "";
        } else {
          this.$refs.QuestionsInfo.show = abc[0].id;
        }
        // 获取选中的数据如果数据大于一条那么就把他定义为多选框，拿到数据后传给 checkShow
        let sum = res.options.filter((item) => item.isRight == 1);
        let arr = [];
        if (sum.length > 1) {
          sum.forEach((element) => {
            arr.push(element.id);
          });
          this.$refs.QuestionsInfo.checkShow = arr;
        }
        this.$refs.QuestionsInfo.dialogShow = true;
      }
    },
    //删除
    async del(id) {
      try {
        await this.$confirm("你确定删除当前题目吗？");
        await delQuestionsApi(id);
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
        // this.$message.error("删除失败");
      }
      this.$emit("updateList");
    },
    //审批
    EditExamine(val) {
      this.$refs.examine.dialogVisible = true;
      this.$refs.examine.qureyData.id = val.id;
      console.log(val);
    },
    //上架逻辑
    async shangjia(row) {
      try {
        if (row.publishState == 1) {
          await this.$confirm("你确定要下架吗？");
          await EditQuerstionsListApi({
            id: row.id,
            publishState: 0,
          });
          this.$message.success("下架成功");
        } else {
          await this.$confirm("你确定要上架吗？");
          await EditQuerstionsListApi({
            id: row.id,
            publishState: 1,
          });
          this.$message.success("上架成功");
        }
      } catch (error) {
        this.$message.warning("操作失败,请检查网络");
        console.log(error);
      }
      this.$emit("updateList");
    },
  },
};
</script>

<style>
</style>